<template>
    <div class="OwnerInformation">
        <div class="OwnerInformationheader">
            <p>
                <i class="el-icon-arrow-left"></i>
                <span>成员登记</span>
            </p>
        </div>
        <el-table
            :data="tableData"
            border
            style="width: 100%" class="menbarinformation">
            <el-table-column
            prop="householdName"
            label="姓名"
            width="196">
            </el-table-column>
            <el-table-column
            prop="householdPhone"
            label="手机号码"
            width="196">
            </el-table-column>
            <el-table-column
            prop="householeIDcard"
            label="身份证号"
            width="195">
            </el-table-column>
            <el-table-column
            prop="householdType"
            label="关系"
            width="194">
            </el-table-column>
            <el-table-column
            label="是否注册"
            width="195">
                是
            </el-table-column>
            <el-table-column
            label="操作"
            width="195">
                查看
            </el-table-column>
        </el-table>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span>当前未绑定业主信息，请绑定后查看</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
     data() {
      return {
        datalists: [
            {
                householdName: '王小虎',
                householdPhone:'13013001300',
                householeIDcard:'284282428284289',
                householdType:'家属',
                isregister:'是',
                operate: '查看'
            },
            {
                householdName: '王小虎',
                householdPhone:'13013001300',
                householeIDcard:'284282428284289',
                householdType:'家属',
                isregister:'是',
                operate: '查看'
            },
            {
                householdName: '王小虎',
                householdPhone:'13013001300',
                householeIDcard:'284282428284289',
                householdType:'租户',
                isregister:'是',
                operate: '查看'
            },
        ],
        tableData:[],
        dialogVisible: false,//对话框
      }
    },
    methods:{
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        }
    },
    mounted(){
        if(this.$route.query.data){
            this.$axios.post('http://127.0.0.1/householdselect',{
                date:this.$route.query.data.date
            }).then(res=>{
                if(res.data.data==''){
                    this.dialogVisible=true
                }else{
                    this.tableData=res.data.data
                }
            }).catch(err=>{
                console.log(err)
            })
        }else{
            this.tableData=this.datalists
        }
        
    }
}
</script>

<style lang="scss" scoped>
    .OwnerInformation{
        width: 100%;
        padding: 10px 30px 30px;
        .OwnerInformationheader{
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #666;
            font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
            font-weight: 700;
            .el-icon-arrow-left{
                margin-right: 5px;
                color: #666 !important;
                font-weight: 700 !important;
            }
            .el-icon-arrow-lefts{
                color: #FF3B30;
            }
        }
        .menbarinformation{
            ::v-deep .has-gutter th{
                background-color: #f5f5f5;
            }
        }
    }
</style>